<template>
  <div class="app-container home">
    <div class="box">
      <div class="title">
        <span class="name">数据中心</span>
        <span class="time">更新时间：{{ date | formatDate('yyyy-MM-dd HH:mm:ss')}}</span>
      </div>
      <div class="content flex align-center">
        <div class="left">
          <div>检测路段：{{roadSection}}</div>
          <div>路段负责人：</div>
        </div>
        <div class="right flex">
          <div class="right_icon_list flex">
            <div class="right_icon"><img src="@/assets/images/index/icon2.png" alt=""></div>
            <div class="right_data flex flex-column align-center">
              <div class="data">{{staticDevice?staticDevice.deviceNum:0}}</div>
              <div class="name">设备总数</div>
            </div>
          </div>
          <div class="right_icon_list flex">
            <div class="right_icon"><img src="@/assets/images/index/icon4.png" alt=""></div>
            <div class="right_data flex flex-column align-center">
              <div class="data">{{staticDevice?staticDevice.lineNum:0}}</div>
              <div class="name">通电数量</div>
            </div>
          </div>
          <div class="right_icon_list flex">
            <div class="right_icon"><img src="@/assets/images/index/icon1.png" alt=""></div>
            <div class="right_data flex flex-column align-center">
              <div class="data">{{staticDevice?staticDevice.unusualLineNum:0}}</div>
              <div class="name">断电数量</div>
            </div>
          </div>
          <div class="right_icon_list flex">
            <div class="right_icon"><img src="@/assets/images/index/icon3.png" alt=""></div>
            <div class="right_data flex flex-column align-center">
              <div class="data">{{staticDevice?staticDevice.unusualDeviceNum:0}}</div>
              <div class="name">异常数量</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box mt-15">
      <div class="title">
        <span class="name">设备列表</span>
      </div>
      <div class="content_search">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="设备检索" prop="searchValue">
            <el-input
              v-model="queryParams.searchValue"
              placeholder="设备编码/设备名称/IMEI/ICCID"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="安装路段" prop="roadSectionId">
            <el-select v-model="queryParams.roadSectionId" placeholder="请选择" @change="changeRoadSection" style="width: 100%">
              <el-option
                v-for="item in roadSectionList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型" prop="deviceType">
            <el-select v-model="queryParams.deviceType" placeholder="请选择" clearable style="width: 240px">
              <el-option
                v-for="dict in dict.type.device_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
         <!-- <el-form-item label="设备状态" prop="deviceStatus">
            <el-select v-model="queryParams.deviceStatus" placeholder="请选择" clearable style="width: 240px">
              <el-option
                v-for="dict in dict.type.device_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="box_list">
      <div class="box" v-for="(item,index) in deviceManageList" :key="index">
        <div class="box_status">
          <div class="box_status_icon">
            <img src="@/assets/images/index/online.png" v-if="item.deviceStatus == 0" alt="">
            <img src="@/assets/images/index/offline.png" v-else-if="item.deviceStatus == 1" alt="">
          </div>
          <div class="box_status_name" :title="item.deviceCode">{{ item.deviceCode }}</div><!--0-断线；1-在线；-->
          <div class="box_statu_text">
            <span style="color:#F56C6C" v-if="item.deviceStatus=='0'">断线</span>
            <span style="color:#67C23A" v-if="item.deviceStatus=='1'">在线</span>
          </div>
        </div>
        <div class="box_cont">
          <div class="box_cont_item" v-for="(inner,j) in item.lineList" :key="j" :class="['error','success'][inner.status] || 'yel'">
            <div class="item_name">
              <span v-if="inner.lineName=='0'">主线</span>
              <span v-if="inner.lineName=='1'">1号子线</span>
              <span v-if="inner.lineName=='2'">2号子线</span>
              <span v-if="inner.lineName=='3'">3号子线</span>
              <span v-if="inner.lineName=='4'">4号子线</span>
            </div>
            <div class="item_voltage">
              <span v-if="inner.voltage=='0'">220V</span>
              <span v-if="inner.voltage=='1'">380V</span>
            </div>
            <div class="item_status" v-if="item.deviceStatus=='0'">
              <span v-if="inner.lineName=='0'">未知</span>
              <span v-if="inner.lineName=='1'">未知</span>
              <span v-if="inner.lineName=='2'">未知</span>
              <span v-if="inner.lineName=='3'">未知</span>
              <span v-if="inner.lineName=='4'">未知</span>
            </div>
            <div class="item_status" v-if="item.deviceStatus=='1'">
              <span v-if="inner.lineName=='0' && inner.status=='0'">断电</span>
              <span v-if="inner.lineName=='0' && inner.status=='1'">通电</span>
              <span v-if="inner.lineName=='1' && inner.status=='0' && inner.voltage=='0'">断电</span>
              <span v-if="inner.lineName=='1' && inner.status=='0' && inner.voltage=='1'">缺相</span>
              <span v-if="inner.lineName=='1' && inner.status=='1'">通电</span>
              <span v-if="inner.lineName=='2' && inner.status=='0' && inner.voltage=='0'">断电</span>
              <span v-if="inner.lineName=='2' && inner.status=='0' && inner.voltage=='1'">缺相</span>
              <span v-if="inner.lineName=='2' && inner.status=='1'">通电</span>
              <span v-if="inner.lineName=='3' && inner.status=='0' && inner.voltage=='0'">断电</span>
              <span v-if="inner.lineName=='3' && inner.status=='0' && inner.voltage=='1'">缺相</span>
              <span v-if="inner.lineName=='3' && inner.status=='1'">通电</span>
              <span v-if="inner.lineName=='4' && inner.status=='0' && inner.voltage=='0'">断电</span>
              <span v-if="inner.lineName=='4' && inner.status=='0' && inner.voltage=='1'">缺相</span>
              <span v-if="inner.lineName=='4' && inner.status=='1'">通电</span>
            </div>
          </div>
        </div>
        <div class="more" @click="handleDeviceInfo(item.id)"> 更多 <span class="el-icon-d-arrow-right"></span></div>
      </div>
    </div>
      <div class="box mt-15">
        <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            />
        </div>
    <!--引入设备详情页面-->
    <deviceInfo ref="deviceInfo"></deviceInfo>
  </div>
</template>

<script>
  import { deviceLineList, getDeviceManage} from "@/api/business/device/deviceManage"
  import { getDeploymentLocationByClassLevel } from "@/api/business/device/deploymentLocation"
  import { staticDeviceNum} from "@/api/business/device/index"
  import deviceInfo from '@/views/business/device/deviceManage/deviceInfo.vue' //引入设备详情页面
  export default {
    name: "Index",
    dicts: ['device_status', 'device_type'],
    components: {deviceInfo},
    data() {
      return {
        date: new Date(),
        searchVal:'',
        roadSection:'全部',//检测路段
        // 显示搜索条件
        showSearch: true,
        deviceManageList:[],
        queryParams: {
          pageNum: 1,
          pageSize:10,
          searchValue: undefined,
          roadSectionId:undefined,
          deviceType:undefined,
          deviceStatus:undefined
        },
        total:0,
        roadSectionList:[],//路段信息
        staticDevice:{}
    }
  },
    mounted() {
      let _this = this // 声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(() => {
        _this.date = new Date() // 修改数据date
      }, 1000)
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
      }
    },
    filters:{
      formatDate: function(value,args) {
        var dt = new Date(value)
        if (args == 'yyyy-M-d') {// yyyy-M-d
          let year = dt.getFullYear()
          let month = dt.getMonth() + 1
          let date = dt.getDate()
          return `${year}-${month}-${date}`
        } else if (args == 'yyyy-M-d H:m:s') {// yyyy-M-d H:m:s
          let year = dt.getFullYear()
          let month = dt.getMonth() + 1
          let date = dt.getDate()
          let hour = dt.getHours()
          let minute = dt.getMinutes()
          let second = dt.getSeconds()
          return `${year}-${month}-${date} ${hour}:${minute}:${second}`
        } else if (args == 'yyyy-MM-dd') {// yyyy-MM-dd
          let year = dt.getFullYear()
          let month = (dt.getMonth() + 1).toString().padStart(2, '0')
          let date = dt.getDate().toString().padStart(2, '0')
          return `${year}-${month}-${date}`
        } else {// yyyy-MM-dd HH:mm:ss
          let year = dt.getFullYear()
          let month = (dt.getMonth() + 1).toString().padStart(2, '0')
          let date = dt.getDate().toString().padStart(2, '0')
          let hour = dt.getHours().toString().padStart(2, '0')
          let minute = dt.getMinutes().toString().padStart(2, '0')
          let second = dt.getSeconds().toString().padStart(2, '0')
          return `${year}-${month}-${date} ${hour}:${minute}:${second}`
        }
      }
    },
    created() {
      this.getList()
      this.getRoadSection()//加载路段
      this.getStaticDeviceNum()//加载设备统计
    },
  methods: {
    /** 查询商品标签列表 */
    getList() {
      this.loading = true
      deviceLineList(this.queryParams).then(response => {
        this.deviceManageList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 设备详情 */
    handleDeviceInfo(id) {
      this.$refs.deviceInfo.deviceInfo(id)
    },
    /** 查询路段 */
    getRoadSection() {
      this.roadSectionList=[]
      getDeploymentLocationByClassLevel("0").then(response => {
        this.roadSectionList = response.data
      })
    },
    //选择路段 ,加载场地
    changeRoadSection(val){
      this.roadSection= this.roadSectionList.find(item => item.id == val).name
    },
    // 加载设备统计
    getStaticDeviceNum() {
      staticDeviceNum().then(response => {
        this.staticDevice = response.data
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
  }
}
</script>

<style scoped lang="scss">
.pagination-container{
  margin-top: 0;
  padding: 0 !important;
}
  .box_list{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
    .box{
      width: calc(20% - 16px);
      margin: 15px 8px 0 8px;
      min-height: 240px;
      min-width: 240px;
      position: relative;
      .box_status{
        display: flex;
        align-items: center;
        width: 100%;

        .box_status_icon{
          img{
            width: 50px;
          }
        }
        .box_status_name{
          margin-left: 15px;
          margin-top: 10px;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .box_statu_text{
          color: #409EFF;
          justify-content: flex-end;
          margin-left: 15px;
          margin-top: 10px;
        }
        &.success{
          .item_text{
            color: #67C23A;
          }
        }
        &.error{
          .item_text{
            color: #F56C6C;
          }
        }
      }
      .box_cont{
        margin-top: 10px;
        border-top: 1px solid #eee;
        margin-bottom: 20px;
        .box_cont_item{
          margin-top: 10px;
          display: flex;
          align-items: center;
          .item_name{
            flex: 1;
          }
          .item_voltage{
            min-width: 60px;
          }
          .item_status{
            width: 56px;
            text-align: right;
          }
          .item_name:before{
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 25px;
            background-color: #409EFF;
            margin-right: 5px;
          }
          &.success{
            .item_name:before{
              background-color: #67C23A;
            }
            .item_status{
               color: #67C23A;
             }
          }
          &.warn {
            .item_name:before{
              background-color: #f59a23;
            }
            .item_status{
              color: #f59a23;
            }
          }
          &.error{
            .item_name:before{
              background-color: #F56C6C;
            }
            .item_status{
              color: #F56C6C;
            }
          }
          &.yel {
            .item_name:before{
              background-color: #ec808d;
            }
            .item_status{
              color: #ec808d;
            }
          }
        }
      }
      .more{
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 12px;
        color: #666;
        cursor: pointer;
        &:hover{
          color: #409EFF;
        }
      }
    }
  }
  .mlr-20{
    margin: 0 20px;
  }
  .mt-15{
    margin-top: 15px;
  }
  .content{
    width: 85%;
    margin: 0 auto;
    min-width: 1000px;
    margin-top: 20px;
    .left{
      padding-right:50px;
      line-height: 30px;
    }
    .right{
      padding-left: 50px;
      border-left: 1px solid rgb(106 106 106 / 20%);
      justify-content: space-around;
      flex: 1;
      .right_icon_list{
        .right_icon img{
          width: 50px;
        }
        .right_data{
          justify-content: center;
          margin-left: 10px;
          .data{
            font-size: 32px;
            font-weight: bold;
          }
          .name{
            color: #666;
          }
        }
      }
    }
    .list_item{
      .text{
        margin-left: 30px;
        span{
          display: inline-block;
          width: 80px;
          text-align: center;
        }
      }
    }
  }
.content_search{
  width: 100%;
  margin: 0 auto;
  min-width: 1000px;
  margin-top: 20px;
  .left{
    padding-right:50px;
    line-height: 30px;
  }
  .right{
    padding-left: 50px;
    border-left: 1px solid rgb(106 106 106 / 20%);
    justify-content: space-around;
    flex: 1;
    .right_icon_list{
      .right_icon img{
        width: 50px;
      }
      .right_data{
        justify-content: center;
        margin-left: 10px;
        .data{
          font-size: 32px;
          font-weight: bold;
        }
        .name{
          color: #666;
        }
      }
    }
  }
  .list_item{
    .text{
      margin-left: 30px;
      span{
        display: inline-block;
        width: 80px;
        text-align: center;
      }
    }
  }
}
  .flex{
    display: flex;
  }
  .flex-column{
    flex-direction: column;
  }
  .align-center{
    align-items: center;
  }
  .app-container{
    background-color: #EDEFF4;
    height: 100%;
    color: #333;
    padding: 15px;
    font-size: 14px;
  }
  .box{
    padding: 15px;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 2px 3px 15px 2px rgba(198,208,224,0.4);
    width: 100%;
  }
  .title{
    display: flex;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;
  }
  .title .time{
    color: #666;
    font-size: 15px;
  }
  .title .name{
    display: flex;
    align-items: center;
    font-weight: bold;
  }
  .title .name:before{
    content:'';
    display:inline-block;
    width: 5px;
    height: 16px;
    margin-right: 10px;
    background: #409EFF;
    border-radius: 3px;
  }
</style>

